<template>
  <div id="addActivity">
    <el-steps :space="200" :active="stepActive" finish-status="success">
      <el-step :title='item' :key='item.index' v-for='item in stepsArr' ></el-step>
    </el-steps>
    <div v-if="pageShow == 'TYPE'">
      <span class="chooseTypeTitle">*选择类型</span>
      <el-button v-for="item in btnArr" :key="item.id" @click="changeStepArr(item)" class="typeBtn" :class="{ active: actType==item.name?true:false }">{{item.value}}</el-button>
      <stepBtn :nextBtn="toNext" :btnShow="btnShow"></stepBtn>
     </div>
    <info    v-if="pageShow == 'INFO'" @changePageShow="changePageShow"></info>
    <coupon  v-if="pageShow == 'COUPON'" @changePageShow="changePageShow"></coupon>
    <product v-if="pageShow == 'PRODUCT'" @changePageShow="changePageShow"></product>
    <parm    v-if="pageShow == 'PARAM'" @changePageShow="changePageShow"></parm>
  </div>
</template>
<script>
import stepBtn from '../components/stepButton'
import info from '../components/info'
import coupon from '../components/coupon'
import product from '../components/product'
import parm from '../components/param'
import { getActivityType } from 'api/activity'
export default {
  components: {
    stepBtn, info, coupon, product, parm
  },
  data () {
    return {
      stepActive: 0,
      stepsArr: ['选择类型', '基本信息'],
      btnArr: null,
      pageShow: 'TYPE',
      actType: '',
      btnShow: {
        prev: false,
        save: false,
        next: true,
        success: false
      }
    }
  },
  created () {
    this.$emit('setTitleMsg', ['活动管理', '新增'])
    this.getActivityType()
  },
  //销毁前把活动类型信息删除
  beforeDestroy () {
    sessionStorage.removeItem('addActivityType')
    sessionStorage.removeItem('actType')
    sessionStorage.removeItem('activityId')
  },
  watch: {
    pageShow (val) {
      if (val === 'TYPE') {
        sessionStorage.removeItem('activityId')
      }
    }
  },
  methods: {
    // 获取所有的活动类型
    async getActivityType () {
      try {
        let back = await getActivityType();
        back = back.data;
        if (back.resultCode === '200') {
          this.btnArr = [...back.result];
        } else {
          this.$alert(back.msg);
        }
      } catch (err) {
        this.$alert('请求失败', '提示');
      }
    },
    // 根据选中的活动类型更换步骤条长度并把数据存在sessionStorage中
    changeStepArr (parm) {
      let arr = parm.relatedSectionsArray;
      this.actType = parm.name
      let stepArr = ['选择类型'];
      arr.forEach(element => {
        if (element === 'INFO') {
          stepArr.push('基本信息')
        }
        if (element === 'COUPON') {
          stepArr.push('选择卡券')
        }
        if (element === 'PRODUCT') {
          stepArr.push('选择产品')
        }
        if (element === 'PARAM') {
          stepArr.push('选择其他参数')
        }
      });
      this.stepsArr = stepArr;
      sessionStorage.setItem('addActivityType', JSON.stringify(parm));
      let data = {
        text: parm.value,
        type: parm.name
      }
      sessionStorage.setItem('actType', JSON.stringify(data))
    },
    /**
     * 调整步骤条进度
     * @param parm 要显示的标签名
     * @param step prev代表后退，参数为空则前进
     */
    changePageShow (parm, step) {
      this.pageShow = parm;
      if (step === 'prev') {
        this.stepActive = this.stepActive - 1;
      } else {
        this.stepActive = this.stepActive + 1;
      }
    },
    // 下一步
    toNext () {
      //如果活动类型未选择
      if (sessionStorage.getItem('actType') === null) {
        this.$alert('请选择活动类型', '提示')
        return;
      }
      // 步骤条进一步
      this.stepActive = this.stepActive + 1;
      // 进入第二个tab页面
      let actTypeInfo = JSON.parse(sessionStorage.getItem('addActivityType'));
      this.pageShow = actTypeInfo.relatedSectionsArray[0];
    }
  }
}
</script>
<style lang="less" scoped>
  #addActivity{
    .chooseTypeTitle{
      margin-left:20px;
    }
    .typeBtn{
      &:nth-child(2){
        margin-left:50px;
      }
      &:hover{
        color: #fff;
        background: #f7931e;
        border: 1px solid #f7931e;
      }
    }
    .active{
      color: #fff;
      background: #f7931e;
      border: 1px solid #f7931e;
    }
  }
</style>

